<!DOCTYPE html>
<!--suppress JSAnnotator -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>keyword_list</title>
    <!-- Bootstrap -->
    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/custom/css/item_list.css}" rel="stylesheet">

</head>
<body>
<div class="container">
    <div class="text-center caption">
        <h2>关键字管理</h2>
        <div class="menu">
            <button class="btn btn-default" type="button" id="backBtn">返回</button>
        </div>
    </div>
    <div class="form-horizontal search">
        <form action="/keywords" method="post">
            <div class="form-group">
                <input type="hidden" id="selecedBrand" th:value="${brandId}"/>
                <label for="brandSelect" class="col-md-1 col-md-offset-4 control-label">品牌名称</label>
                <div class="col-md-2">
                    <select class="form-control" id="brandSelect" name="brandSelect">
                        <option value="0">全部</option>
                    </select>
                </div>
                <input type="submit" class="col-md-1 btn btn-default" value="查询" />
                <!--<button class="col-md-1 btn btn-default" type="button" id="queryBtn">查询</button>-->
            </div>
        </form>
    </div>

</div>

<div class="container">
    <div class="table-responsive">
        <table class="table table-hover table-condensed text-center">
            <thead>
            <th>序号</th>
            <th>品牌名称</th>
            <th>关键字</th>
            <th>限价</th>
            <th>操作</th>
            </thead>
            <tr th:each="kd : ${keywordList}">
                <td th:text="${kd.id}"></td>
                <td><input type="text" class="form-control text-center" name="brandName" readonly
                           th:value="${kd.brandName}"/></td>
                <td><input type="text" class="form-control text-center" name="keywordName"
                           th:value="${kd.keywordName}"/></td>
                <td><input type="text" class="form-control text-center" name="keywordCordon"
                           th:value="${kd.keywordCordon}"/></td>
                <td>
                    <button class="btn btn-default btn-xs updateBtn" type="button" th:data-id="${kd.id}">修改</button>
                    <button class="btn btn-default btn-xs deleteBtn" type="button" th:data-id="${kd.id}">删除</button>
                </td>
            </tr>
            <tr>
                <td></td>
                <td class="text-center">
                    <select class="form-control" id="brandId"></select>
                </td>
                <td><input type="text" class="form-control text-center" id="keywordName"></td>
                <td><input type="text" class="form-control text-center" id="keywordCordon"></td>
                <td>
                    <button class="btn btn-default btn-xs" type="button" id="addBtn" data-toggle="modal"
                            data-target="#myModal">新增
                    </button>
                </td>
            </tr>
        </table>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <p id="message"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/bootstrap/js/jquery-1.9.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script type="text/javascript">
    function isNumber(val){
        var regPos = /^\d+(\.\d+)?$/; //非负浮点数
//      var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
        if(regPos.test(val)){
            return true;
        }else{
            return false;
        }
    }
    // 品牌下拉列表
    function getBrandAjax() {
        $.ajax({
            url: "/brand",
            type: 'get',
            dataType: 'json',
            success: function (result) {
                var selecedBrand = $('#selecedBrand').val();
                for (let el of result) {
                    if (el.id == selecedBrand) {
                        $("#brandSelect").append("<option value='" + el.id + "' selected='selected'>" + el.brandName + "</option>");
                    } else {
                        $("#brandSelect").append("<option value='" + el.id + "'>" + el.brandName + "</option>");
                    }
                    $("#brandId").append("<option value='" + el.id + "'>" + el.brandName + "</option>");
                }
            }
        })
    }
</script>
<script type="text/javascript">
    $(function () {
        var needReload = false;
        // 页面初始化加载
        getBrandAjax();
        // 返回
        $('#backBtn').click(function () {
            window.location.href = "/items";
        })
        // 修改
        $('.updateBtn').click(function () {
            var kid = $(this).data('id');
            var keywordname = $(this).closest("tr").find("input[name='keywordName']").val();
            if (keywordname == null || keywordname == '') {
                needReload = false;
                $('#message').html("关键字不能为空，请输入！");
                $('#myModal').modal('show');
                return false;
            }
            var keywordcordon = $(this).closest("tr").find("input[name='keywordCordon']").val();
            if (keywordcordon == null || keywordcordon == '') {
                needReload = false;
                $('#message').html("限价不能为空，请输入！");
                $('#myModal').modal('show');
                return false;
            }
            if(!isNumber(keywordcordon)) {
                needReload = false;
                $('#message').html("限价不是数字，请修改！");
                $('#myModal').modal('show');
                return false;
            }

            var param = {
                id: kid,
                keywordName: keywordname,
                keywordCordon: keywordcordon
            }
            $.ajax({
                type: 'post',
                url: "/keyword",
                contentType: "application/json",
                data: "text",
                data: JSON.stringify(param),
                cache: false,
                success: function (result) {
                    needReload = true;
                    $('#message').html(result);
                    $('#myModal').modal('show');
                }
            })
        })
        // 删除
        $('.deleteBtn').click(function () {
            $.ajax({
                url: '/keyword/delete/id/' + $(this).data('id'),
                dataType: 'text',
                success: function (result) {
                    needReload = true;
                    $("#message").html(result);
                    $('#myModal').modal('show');
                }
            });
        })
        // 新增
        $('#addBtn').click(function () {
            var brandid = $('#brandId').val();
            if (brandid == null || brandid == '') {
                needReload = false;
                $('#message').html("品牌名称不能为空，请选择！");
                $('#myModal').modal('show');
                return false;
            }
            var vname = $('#keywordName').val();
            if (vname == null || vname == '') {
                needReload = false;
                $('#message').html("关键字不能为空，请输入！");
                $('#myModal').modal('show');
                return false;
            }
            var vcordon = $('#keywordCordon').val();
            if (vcordon == null || vcordon == '') {
                needReload = false;
                $('#message').html("限价不能为空，请输入！");
                $('#myModal').modal('show');
                return false;
            }
            if(!isNumber(vcordon)){
                needReload = false;
                $('#message').html("限价请输入数字，请修改！");
                $('#myModal').modal('show');
                return false;
            }
            var param = {
                id: null,
                brandId: brandid,
                keywordName: vname,
                keywordCordon: vcordon
            }
            $.ajax({
                type: 'post',
                url: "/keyword",
                contentType: "application/json",
                data: "text",
                data: JSON.stringify(param),
                cache: false,
                success: function (result) {
                    needReload = true;
                    $('#message').html(result);
                    $('#myModal').modal('show');
                }
            })
        })

        // 模态框关闭
        $('#myModal').on('hidden.bs.modal', function (e) {
            if (needReload) {
                var brandid = $('#brandSelect').val();
                if(brandid == 0) {
                    window.location.href = "/keywords";
                } else {
                    $('form').submit();
                }
            }
        })
    })
</script>
</body>
</html>